﻿<Controls:PivotItem x:Class="PhoneGuitarTab.UI.Controls.Tabs"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"
                    xmlns:Controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
                    xmlns:Infrastructure="clr-namespace:PhoneGuitarTab.UI.Infrastructure"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                    DataContext="{Binding Collection,
                                          Source={StaticResource Locator}}"
                    Header="tabs"
                    mc:Ignorable="d">
    <Controls:PivotItem.Resources>
        <Infrastructure:TabToBrushValueConverter x:Key="tabBrush" />
    </Controls:PivotItem.Resources>

    <toolkit:LongListSelector x:Name="TabList"
                              Background="Transparent"
                              BufferSize="10.0"
                              GroupHeaderTemplate="{StaticResource GroupHeaderTemplate}"
                              ItemTemplate="{StaticResource TabItemDataTemplate}"
                              ItemsSource="{Binding AllTabs}">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseLeftButtonUp">
                <Command:EventToCommand Command="{Binding GoToTabView}" CommandParameter="{Binding ElementName=TabList}" />
            </i:EventTrigger>
        </i:Interaction.Triggers>

        <toolkit:LongListSelector.GroupItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </toolkit:LongListSelector.GroupItemsPanel>

        <toolkit:LongListSelector.GroupItemTemplate>
            <DataTemplate>
                <Border Width="99"
                        Height="99"
                        Margin="6"
                        Background="{Binding Converter={StaticResource tabBrush}}"
                        IsHitTestVisible="{Binding HasItems}">
                    <TextBlock Margin="{StaticResource PhoneTouchTargetOverhang}"
                               VerticalAlignment="Bottom"
                               FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                               FontSize="36"
                               Foreground="{StaticResource PhoneForegroundBrush}"
                               Text="{Binding Key}" />
                </Border>
            </DataTemplate>
        </toolkit:LongListSelector.GroupItemTemplate>
    </toolkit:LongListSelector>

</Controls:PivotItem>